<template>
  <el-dialog
    :model-value="dialog"
    title="将执行复制操作所复制的内容"
    align-center
    draggable
    width="90%"
    style="border-radius: 10px; padding: 5px 10px"
  >
    <el-row :gutter="20">
      <el-col :span="8">
        <div>{{month-1}}月评分条目</div>
        <el-table
          :data="ScoreRuleList"
          height="450"
          style="
            width: 90%;
            margin: 5px 10px;
            border-radius: 8px;
            box-shadow: 0px 5px 5px #b1b3b8;
          "
          :header-cell-style="{
            textAlign: 'center',
          }"
        >
          <el-table-column prop="target" label="评分指标"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="16">
        <div>{{month-1}}月岗位评分条目</div>
        <el-table
          :data="PositionScoreList"
          height="450"
          style="
            width: 95%;
            margin-top: 5px;
            border-radius: 8px;
            box-shadow: 0px 5px 5px #b1b3b8;
          "
          :header-cell-style="{
            textAlign: 'center',
          }"
        >
          <el-table-column prop="position" label="岗位" width="150" />
          <el-table-column
            prop="target"
            label="考核条目"
            class-name="my-content"
          >
          </el-table-column>
          <el-table-column prop="percent" label="考核条目占比" width="120">
            <template #default="scope">
              <el-tag disable-transitions>{{ scope.row.scorePercent }}%</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="assessorName" label="考核人" width="150" />
          <el-table-column
            prop="assessorPercent"
            label="考核人占比"
            width="120"
          >
            <template #default="scope">
              <el-tag disable-transitions
                >{{ scope.row.assessorPercent }}%</el-tag
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="button">
      <el-button style="width: 180px" type="primary" @click="submitForm"
        >确认复制</el-button
      >
      <el-button style="width: 180px" @click="onClose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import {
  ref,
  onBeforeMount,
  reactive,
  defineProps,
  defineEmits,
  watch,
} from "vue";
import { getScoreRulelist, getPositionScoreList } from "@/api/preview";
import { copy } from "@/api/score";
import { ElMessage } from "element-plus";

const dialog = ref(true);
const props = defineProps({
  dialog: {
    type: Boolean,
    required: true,
  },
  update: {
    type: Function,
    default: () => {},
  },
  close: {
    type: Function,
    default: () => {},
  },
});

const ScoreRuleList = ref([]);
const PositionScoreList = ref([]);
const month =new Date().getMonth()
onBeforeMount(() => {
  getScoreRulelist().then((data) => {
    ScoreRuleList.value = data.data;
  });
  getPositionScoreList().then((data) => {
    PositionScoreList.value = data.data;
  });
});
watch(props, (newValue, oldValue) => {}, { deep: true });

const submitForm = () => {
  copy().then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "复制成功",
        type: "success",
      });
      props.update();
      props.close();
    } else {
      ElMessage.error("复制失败");
    }
  });
};

const onClose = () => {
  props.close();
};
</script>
<style lang="scss" scoped >
::v-deep .el-form-item__label:before {
  content: "* ";
  color: red;
}
.ins {
  ::v-deep .el-form-item__label:before {
    content: " ";
  }
}
.button {
  margin: 20px 50px;
  display: flex;
  justify-content: center;
}
</style>
